<!-- 礼品兑换 -->
<template>
	<view class="pr">
		<!-- -->
		<view class="box pf" v-if="type">
			<view class="card x-ac pr">
				<view class="text" v-if="!chageText">当前页面浏览60秒，即可得10积分</view>
				<view class="text" v-if="chageText" @click="finall">浏览页面已完成，点击前往领取积分</view>
				<view class="time pa" v-if="!chageText">
					<view class="gray tc" @click="get_time">
						<span>{{ count }}</span>
					</view>
				</view>
				<image src="/static/image/time.png" v-if="!chageText"></image>
			</view>
		</view>
		<view class="tabs" :class="{'chageTap': type == true}">
			<v-tabs :list="tap" :current="current" @change="change" active-color="#000" bg-color="#f8f8fb" gutter=25
				:index=index :position="position">
			</v-tabs>
		</view>
		<view class="content" :class="{'chageTop': type == false}" @touchstart="touchStart($event)"
			@touchmove="touchMove($event)" @touchend="touchEnd($event)">
			<refresh :freshFlag="freshFlag" :loadMsg="loadMsg"></refresh>
			<goods-list :goods_data="goods" @clear="clear" ref="goodsList"></goods-list>
		</view>
		<!-- 触底加载 -->
		<view class="getMore" style="padding-bottom: 50rpx;" v-if="goods.length">
			<touch-bottom :isNone="isNone" :isLoad="isLoad" :isName="isName"></touch-bottom>
		</view>
		<empty :null_data="null_data" v-if="goods.length == 0 && isLoad == false"></empty>
		<!-- 返回顶部 -->
		<backtop :show_top="show_top"></backtop>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				index: 999, // 权重
				position: "fixed", // 固定定位
				count: 60, // 倒计时
				null_data: { // 空状态
					null_img: this.imgUrl + 'nogoodss.png',
					text: '暂无商品~'
				},
				isName: false, // 触底加载
				isLoad: false, // 触底加载
				isNone: false, // 触底加载
				current: 0,    // tabs初始选项
				goods: [],     // 商品		 
				obj: {		   // 请求参数
					page: 1,
					pagesize: 10,
					category_id: 1,
					orderby_type: 'number',
					orderby: 'desc',
					lat: '24.881627',
					lng: '118.628881',
					is_group: ''
				},
				tap: [],		// 菜单列表
				type: false,	// 状态
				autoStatus: false, // 倒计时开启
				show: true,		   // 显示
				timer: null,	   // 定时器
				num: 10, 		   // 10秒触发一次定时器
				oldScrollTop: 0,   //记录上一次滚动结束后的滚动距离
				scrollTop: 0,      // 记录当前的滚动距离
				chageText: false,  // 修改积分任务文字
				totalPages: 0, 	   // 总页数
				// 下拉刷新
				startY: 0, // 保存 y轴点的位置
				loadShowHeight: 0,
				loadMinHeight: 0,
				loadMsg: '',
				freshFlag: false,
				show_top: false, // 回到顶部按钮显示
			}
		},
		computed: {
			...mapState({
				listData: state => state.goods.menu,        // 菜单
				taskDetail: state => state.task.taskDetail,	// 积分任务详情
				status: state => state.task.status,			// 积分任务状态
			})
		},
		onUnload() {
			// 清理积分任务状态
			this.type = false
			this.$store.dispatch('task/get_status', this.type)
		},
		watch: {
			// 监听滚动高度
			scrollTop(newValue, oldValue) {
				setTimeout(() => {
					if (newValue == this.scrollTop) { //延时执行后当newValue等于window.scrollY，代表滚动结束
						this.oldScrollTop = newValue; //每次滚动结束后都要给oldScrollTop赋值
						clearInterval(this.timer);
					};
				}, 10000); //必须使用延时器，否则每次newValue和window.scrollY都相等，无法判断，20ms刚好大于watch的侦听周期，故延时20ms
				if (this.oldScrollTop == oldValue) { //每次滚动开始时oldScrollTop与oldValue相等
					let sum = newValue - oldValue;
					if (sum > 0) {
						if (sum > 0 || sum < 0) {
							clearInterval(this.timer);
							// 开启计时器;
							this.get_time();
						}
					}
				}
				if (newValue > 100) {
					this.show_top = true;
				} else {
					this.show_top = false;
				}
			},
			// 监听下拉下标
			current(newVal, oldVal) {
				if (newVal != oldVal) {
					this.clear();
					this.getApi();
				}
			},
			// 监听秒
			count(newVal, oldVal) {
				if (this.type) {
					if (newVal == 0) {
						this.getTaskApi();
					}
				}
			},
		},
		// 当页面滚动时触发;
		onPageScroll(res) {
			// 获取当前页面滚动高度；
			this.scrollTop = res.scrollTop;
			/**
			 * 当页面滚动高度大于 0 触发倒计时
			 * 同时启动计时器 - 验证页面滚动高度是否有发生改变;
			 * 如果有发生改变 - 则继续倒计时;
			 * 如果没有发生改变 - 则停止倒计时;
			 * 页面滚动高度，重新滚动，则继续倒计时;
			 */
		},
		mounted() {
			// 获取分类菜单
			this.type = this.status
			this.tap = this.listData
			this.tap = this.listData.map(v => {
				return {
					name: v.label,
					id: v.id,
				}
			})
			this.obj.category_id = this.tap[0].id
			this.getApi();
		},
		onReachBottom() {
			this.getMore();
		},
		methods: {
			touchStart(e) {
				this.startY = e.touches[0].pageY;
			},
			touchMove(e) {
				if (this.scrollTop == 0) {
					let moveDistance = e.touches[0].pageY - this.startY;
					if (moveDistance > 0 && moveDistance <= (this.loadMaxHeight || 30)) {
						this.loadShowHeight = moveDistance;
					};
				};
			},
			touchEnd(e) {
				if (this.loadShowHeight >= (this.loadMinHeight || 20)) {
					this.refresh();
				} else {
					this.loadShowHeight = 0;
				}
			},
			refresh() {
				this.freshFlag = true;
				this.loadMsg = '刷新中...';
				setTimeout(() => {
					this.getMore();
					this.loadMsg = '刷新完成';
					this.loadShowHeight = 0;
					setTimeout(() => {
						this.freshFlag = false;
					}, 500)
				}, 1500);
			},
			// 完成
			finall() {
				this.$Router.push({
					path: '/pages/user/score/task/index'
				})
			},
			// 请求完成任务接口
			getTaskApi() {
				this.$api('task.finish', {
					key: 'browse_the_page'
				}).then(res => {
					if (res.data.finish_task) {
						this.chageText = true
					}
				})
			},
			// 清除商品
			clear() {
				this.$refs.goodsList.clear();
			},
			// 倒计时
			get_time() {
				this.timer = setInterval(() => {
					this.count = this.count - 1;
					if (this.count < 0) {
						// 停止倒计时
						clearInterval(this.timer);
						this.timer = null;
						this.count = 0;
					}
				}, 1000);
			},
			// 加载更多
			getMore() {
				this.isNone = true;
				this.isLoad = true;
				this.isName = false;
				setTimeout(() => {
					this.obj.page++
					if (this.obj.page <= this.totalPages) {
						this.$api('giftpage', this.obj).then(res => {
							let arr = res.data.data
							this.goods = arr
							if (!res.data.data.length) {
								this.isLoad = false;
								this.isName = true
							} else {
								this.isLoad = false;
								this.isNone = false;
							}
						})
					} else {
						this.isNone = true
						this.isLoad = false
						this.isName = true
					}
				}, 300)
			},
			/**
			 * 通过获取tabs下标，获得类型.
			 * 根据类型进行筛选数据
			 */
			getApi() {
				this.$api('giftpage', this.obj).then(res => {
					this.goods = res.data.data
					this.totalPages = res.data.totalPages
				})
			},
			change(index) {
				this.isName = false;
				this.obj.page = 0
				this.obj.category_id = 1
				this.current = index;
				for (let i in this.tap) {
					if (this.current == this.tap[i].id) {
						this.obj.category_id = this.current + 1
					}
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';

	.chageTop {
		padding-top: 100rpx !important;
	}

	.chageTap {
		margin-top: 82rpx !important;
	}
</style>
